import React,{Component} from 'react';
import {Flex} from 'antd-mobile';
import {ImageBackground,StyleSheet,View,Image,Text,TextInput,TouchableOpacity,Platform,Alert} from 'react-native'
import NativeToastAndroid from './../NativeToastAndroid';

var Dimensions = require('Dimensions')
class Register extends Component{
    constructor(props){
        super(props);
        this.state = {
            userNum:'',
            userPassword:'',
        }
    }
    registerUser(){
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android'){
            NativeToastAndroid.sign((data)=> {
                const staus = data.result;
                const datalist = data.data;
                const dataObject = JSON.parse(datalist);
                const test = dataObject.code;
                Alert.alert(
                    '提示',
                    test,
                    [
                        {text:staus},
                    ]
                )
            })
        }
    }
    goLogin(){

    }
    render(){
        return(
            <View>
                <ImageBackground style={styles.background} source={require('./../../../file/register_background.png')}>
                    <Flex justify="center">
                        <View style={styles.inputBox}>
                            <Flex>
                                <Image style={styles.inputLogo} source={require('./../../../file/register_user.png')}></Image>
                                <Text style={styles.inputText}>学号/学工号</Text>
                            </Flex>
                            <TextInput
                                underlineColorAndroid="#1e90ff"
                                selectionColor="#1e90ff"
                                style={styles.inputStyle}
                                onChangeText={(userNum) => this.setState({userNum})} />
                            <Flex>
                                <Image style={styles.inputLogo} source={require('./../../../file/register_key.png')}></Image>
                                <Text style={styles.inputText}>教务处密码</Text>
                            </Flex>
                            <TextInput underlineColorAndroid="#1e90ff"
                                       selectionColor="#1e90ff"
                                       secureTextEntry={true}
                                       style={styles.inputStyle}
                                       onChangeText={(userPassword) => this.setState({userPassword})} />
                            <Flex justify="center">
                                <TouchableOpacity onPress={()=>this.registerUser()}
                                                  style={styles.btnStyle}
                                                  activeOpacity={0.5}>
                                    <Text style={{color:'#fff',fontSize:16}}>注册</Text>
                                </TouchableOpacity>
                            </Flex>
                            <Flex justify="center">
                                <TouchableOpacity onPress={()=>this.goLogin()} style={styles.goLogin} activeOpacity={0.5}>
                                    <Text style={{color:'#1e90ff',fontSize:12}}>已有账号，去登录</Text>
                                </TouchableOpacity>
                            </Flex>
                        </View>
                    </Flex>
                </ImageBackground>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    background: {
        width:Dimensions.get('window').width,
        height:Dimensions.get('window').height
    },
    logoBox:{
        marginTop:58
    },
    inputBox:{
        marginTop:110,
        height:320,
        width:290,
        backgroundColor:'#fefefe',
        borderRadius:8,
        elevation:20,
        shadowColor:"#fff",
        shadowOffset:{width:0,height:0},
        padding:15
    },
    inputLogo:{
        width:20,
        height:20
    },
    inputText:{
        marginLeft:15,
        fontSize:14,
        height:20,
        lineHeight:20,
        color:'#1e90ff',
        letterSpacing:1.08
    },
    inputStyle:{
        padding:0,
        height:50,
        marginBottom:10,
        borderColor:'#1e90ff'
    },
    btnStyle:{
        marginTop:30,
        borderRadius:12,
        alignSelf:'center',
        width:246,
        height:42,
        backgroundColor:'#4286F5',
        justifyContent:'center',
        alignItems:'center'
    },
    goLogin:{
        marginTop:35
    }
});

export default Register;